<script setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import { ElMessage } from 'element-plus'
import { addRoleList, getMenuListApi, getRoleApi, editRoleApi } from '@/api/role.js'
import { useRoleStatus } from '@/hooks'
import { transListToTreeData } from "../../../utils/tree";
const roleStatus = useRoleStatus()

const formRef = ref('')
const isShow = ref(false)

//表单数据
const defaultState =
{
    create_time: '',
    description: "",
    id: null,
    menus: "",
    name: "",
    status: ''
}
const formData = reactive({ ...defaultState })
//验证规则
const formRule = {
    name: [{ required: true, message: '请输入', trigger: 'blur' }]
}

// 获取树的数据
const list = ref([])
const getTreeList = async () => {
    const res = await getMenuListApi()
    // console.log(res)
    list.value = transListToTreeData(res.data, 0)
}

// 新增修改
const treeRef = ref()
const addRole = async () => {
    await formRef.value.validate()
    // 获取选中的节点和半节点
    formData.menus = [...treeRef.value.getCheckedKeys(), ...treeRef.value.getHalfCheckedKeys()]
    // console.log(formData.menus);
    formData.id ? await editRoleApi(formData) : await addRoleList(formData)

    ElMessage.success(formData.id ? '修改成功' : '添加成功')
    isShow.value = false
}

// 回显
const replyData = async (id) => {
    const res = await getRoleApi(id)
    // console.log(res)
    res.data.menus = transListToTreeData(res.data.menuList, 0) // 转树
    console.log(res.data.menus);
    res.data.menus = ed(res.data.menus, [])
    Object.assign(formData, res.data)
    await nextTick()
    treeRef.value.setCheckedKeys(res.data.menus)
    // isShow.value = true
}

function ed(arr, ret) {
    arr.forEach(item => {
        if (!item.children) {
            ret.push(item.id)
        } else {
            ed(item.children, ret)
        }
    })
    return ret
}

// 关闭
const closeHandler = () => {
    // 移除校验
    formRef.value.resetFields()
    // 重置表单数据
    Object.assign(formData, { ...defaultState })
    treeRef.value.setCheckedKeys([])
};

onMounted(() => {
    getTreeList()
})

defineExpose({
    isShow,
    replyData
})
</script>

<template>
    <el-drawer v-model="isShow" :title="title" direction="rtl" size="40%" @close="closeHandler">
        <el-form :model="formData" :rules="formRule" ref="formRef" label-position="top">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="角色名称" prop="name" :label-width="formLabelWidth">
                        <el-input slot="prepend" v-model="formData.name" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="角色描述" prop="description" :label-width="formLabelWidth">
                        <el-input slot="prepend" v-model="formData.description" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="权限标识">
                        <el-tree class="mx-4" ref="treeRef" :data="list" :props="{ label: 'title' }" show-checkbox
                            node-key="id" highlight-current />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="启用状态" prop="type">
                        <el-radio-group v-model="formData.status">
                            <el-radio size="large" v-for="item in roleStatus" :key="item.value" :label="item.value">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div>
            <el-button @click="isShow = false">取消</el-button>
            <el-button type="primary" @click="addRole">
                确定
            </el-button>
        </div>
    </el-drawer>
</template>

<style lang="scss" scoped></style>